<template>
  <view class="list" v-if="books">
    <view class="list-item-container" v-for="item in books" :key="item.id">
      <uni-card is-full @click="goToBookDetail(item.id)">
        <view class="img">
          <image :src="item.img" mode="aspectFill"></image>
        </view>
        <view class="bookInfo">
          <view class="name">{{ item.name }}</view>
          <view class="author">
            作者：
            <span>{{ item.author }}</span>
          </view>
          <view class="publisher">
            出版社：
            <span>{{ item.publish }}</span>
          </view>
          <view class="state">
            借阅：
            <span :class="{ active: item.status, occupied: item.status }">
              {{ item.status ? '可借阅' : '已借阅' }}
            </span>
          </view>
          <view class="bookIndex">
            索书号：
            <span>{{ item.num }}</span>
          </view>
          <view class="publish-year">
            出版年：
            <span>{{ item.year }}</span>
          </view>
          <view class="isbn">
            ISBN:
            <span>{{ item.isbn }}</span>
          </view>
        </view>
      </uni-card>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    books: {
      type: Array,
      required: true
    }
  },
  created () {

    console.log('%c [  ]-52', 'font-size:13px; background:pink; color:#bf2c9f;', this.books)
  },
  methods: {
    goToBookDetail (id) {

      uni.navigateTo({
        url: `/subpackage/book-search/book-detail?id=${id}`
      });
    }
  }
};
</script>

<style lang="scss">
.list-item-container {
  // height: 300rpx;
  width: 100%;
  margin: 20rpx auto;

  box-sizing: border-box;

  .uni-card {
    border-radius: 10rpx;

    .uni-card__content {
      display: flex;
      gap: 40rpx;

      .img {
        $size: 250rpx;
        width: $size * 0.7;
        height: $size;
        background-color: skyblue;
        align-self: center;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .bookInfo {
        flex: 1;
        font-size: 22rpx;

        view {
          // height: 35rpx;
          line-height: 35rpx;

          .occupied {
            color: red;
          }

          .active {
            color: #f8b50a;
          }
        }

        .name {
          // height: 60rpx;
          line-height: 60rpx;
          font-size: 26rpx;
          font-weight: 700;
        }
      }
    }
  }
}
</style>
